<template>
  <div class="bg" style="overflow: hidden">
    <canvas ref="cloudCanvas" id="cloudCanvas"></canvas>
    <div
      class="clickButton mountain"
      @click="showPrice('mountain')"
      :style="{ opacity: opacity }"
    >
      爪哇山
    </div>
    <div
      class="clickButton village"
      @click="showPrice('village')"
      :style="{ opacity: opacity }"
    >
      爪哇村
    </div>
    <div
      class="clickButton river"
      @click="showPrice('river')"
      :style="{ opacity: opacity }"
    >
      爪哇河
    </div>
    <div
      class="clickButton secret"
      @click="turnTo"
      :style="{ padding: '30px 40px 48px 40px', opacity: opacity }"
    >
      神秘画卷
    </div>
    <div id="showPrice" v-show="show">
      <div class="success" v-if="judgePrice">恭喜你，获得{{ price }}等奖</div>
      <div class="fail" v-else>很遗憾，您未中奖</div>
    </div>
    <div id="specialShowPrice" v-show="showSectry">
      <canvas
        id="canvas"
        v-show="drawable"
        ref="myCanvas"
        style="background: #f0e7d8"
      ></canvas>
      <div class="specialTitle" @click.once="specialChange">
        {{ specilTit }}
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
// import {
//   MessageBox
// } from 'element-ui';
// import {
//   Toast
// } from 'vant/lib/toast';
import Vue from "vue";
import {Toast } from "vant";
Vue.use(Toast);

export default {
  data: function () {
    return {
      show: false,
      showSectry: false,
      price: "三",
      judge: true,
      token: "",
      judgePrice: false,
      specialTitle: "点我",
      ctx: "",
      specilTit: "点击此处完成作画",
      flag: "",
      img: null, // cloud 进入动画 背景图片对象
      imgMark: null, // cloud 进入动画 雨雾图片对象
      markLoaded: false, // 图片加载完成与否
      count: 0,
      opacity: 0,
      isiOS: false,
      drawable: true, // canvas 画板是否显示，抽奖后不再显示
      animationId: 0, // 启动进入动画函数生成，当 opacity 变成 1 后清除动画
    };
  },
  watch: {
    opacity(n) {
      if (n > 1) {
        window.cancelAnimationFrame(this.animationId); // 清除动画
      }
    },
  },
  methods: {
    /**
     *  爪哇山、爪哇村、爪哇河点击事件处理函数
     */

    async showPrice(point) {
      // 已抽奖
      if (this.judgeWherter()) {
        return;
      }

      // 未抽奖，输入兑换号码
      if(!await this.loginInput()){
        // 兑换号码无效
        return;
      }
      // 兑换号码有效，开始抽奖

      await this.getPrice();
      // console.log("1秒后")
      this.show = true;
      if (point == "mountain") {
        //没中奖了的话
        if (!this.judgePrice) {
          $("#showPrice").css({
            backgroundImage:
              'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/m_fail.gif")',
          });
        } else {
          $("#showPrice").css({
            backgroundImage:
              'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/m_success.gif")',
          });
        }
      } else if (point == "village") {
        if (!this.judgePrice) {
          $("#showPrice").css({
            backgroundImage:
              'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/v_fail.gif")',
          });
        } else {
          $("#showPrice").css({
            backgroundImage:
              'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/v_success.gif")',
          });
        }
      } else if (point == "river") {
        if (!this.judgePrice) {
          $("#showPrice").css({
            backgroundImage:
              'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/r_fail.gif")',
          });
        } else {
          $("#showPrice").css({
            backgroundImage:
              'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/r_success.gif")',
          });
        }
      }
      $("#showPrice").css({
        "background-repeat": "no-repeat",
        "background-size": "100% 100%",
      });
    },
    getPrice() {
      return new Promise((resolve) => {
        // let sino = parseInt(Math.random() * 6 +1)
        // let flag = window.localStorage.getItem("flag")
        // let time = window.localStorage.getItem("time")
        // console.log("time:" + time)
        // let endTime = Math.round(new Date().getTime() - time) / (1000 * 60)
        // console.log(!flag )
        // flag = false
        // if (endTime > 5) {
        // debugger
        // 抽奖是根据 token 作为参数的
        console.log(this.token);
        this.$axios.defaults.headers.common["Authorization"] = this.token;
        this.$axios.post("/begin").then((res) => {
          let data = res.data;
          window.localStorage.setItem("time", new Date().getTime());
          this.price = data.prizeGrade;
          this.judgePrice = data.winning;
          localStorage.setItem("flag", 1); // 1 表示已抽奖， 0 表示未抽奖
          localStorage.setItem("price", this.price);
          resolve(res);
        });
      });
    },

    async turnTo() {
      // 已抽奖不能进入
      if (this.judgeWherter()) {
        return;
      }
      // 输入兑换号码
      if(!(await this.loginInput())){
        // 兑换号码无效
        return;
      }
      // 兑换号码有效，进入画卷
       this.showSectry = true;
    },
    async specialChange() {
      // console.log(1111)
      await this.getPrice();
      if (!this.judgePrice) {
        $("#specialShowPrice").css({
          backgroundImage:
            'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/s_fail.gif")',
        });
        this.specilTit = "很遗憾，你没有中奖";
      } else {
        $("#specialShowPrice").css({
          backgroundImage:
            'url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/s_success.gif")',
        });
        this.specilTit = `恭喜你获得${this.price}等奖`;
      }
      this.drawable = false; // 关闭 canvas 画布
    },
    failLottery() {
      // window.location.reload();
    },
    /**
     * 显示动画，判断已抽奖，若已抽象给出用户结果提示
     * 已抽奖，返回 true
     * 未抽奖，返回 false
     */
    judgeWherter() {
      if (localStorage.getItem("flag")) {
        let price = localStorage.getItem("price");
        let message = "";
        if (price == 4) {
          message = "您已经抽奖，但很遗憾未中奖";
        } else {
          message = `您已经抽奖，恭喜你获得${price}等奖`;
        }
        Toast({
          type: "fail",
          message,
          className: "fail",
          onOpened: function () {
            // window.location.reload()
          },
          duration: 7000,
        });
        // window.location.reload()
        this.flag = "111";
        return true;
      }
      return false;
    },
    paint() {
      // 获得整个屏幕的长和宽
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      // console.log(width, height)
      // console.log(width,height)
      var canvas = this.$refs.myCanvas;
      this.ctx = canvas.getContext("2d");
      canvas.width = (width / 100) * 56.93;
      canvas.height = (height / 100) * 57.3;
      // console.log(canvas)
      // console.log(ctx)
      // let flag = true;
      this.ctx.lineWidth = 1.0;
      canvas.addEventListener(
        "touchstart",
        (e) => {
          // console.log("开始触摸！")
          let touch = e.targetTouches[0];
          // console.log(e)
          this.ctx.beginPath();
          this.ctx.moveTo(
            touch.clientX - canvas.offsetLeft,
            touch.clientY - canvas.offsetTop
          );
          canvas.addEventListener(
            "touchmove",
            (e) => {
              // console.log("开始移动")
              // console.log(e)
              if (e.targetTouches.length === 1) {
                let touch = e.targetTouches[0];
                this.ctx.lineTo(
                  touch.clientX - canvas.offsetLeft,
                  touch.clientY - canvas.offsetTop
                );
                this.ctx.stroke();
              }
            },
            false
          );
          canvas.addEventListener(
            "touchend",
            (e) => {
              this.ctx.closePath();
              // console.log("我没了")
              console.log(e);
            },
            false
          );
        },
        false
      );
    },
    /**
     * 判断是否已登录
     */
    judgeLogin() {
      if (localStorage.getItem("token")) {
        let time = window.localStorage.getItem("time");
        // console.log("time:"+time)
        let endTime = Math.round(new Date().getTime() - time) / (1000 * 60);
        if (endTime > 5) {
          localStorage.clear();
        } else {
          this.token = localStorage.getItem("token");
        }
      }
    },

    /**
     * 兑换抽奖号码输入处理函数
     */
    loginInput() {
      return new Promise((resolve) => {
        this.$msgbox
          .prompt("请输入你的手机号码(手机号码仅用于兑奖使用)", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^1[3456789]\d{9}$/,
            inputErrorMessage: "格式不正确",
            confirmButtonClass: "confirmButton",
            customClass: "messageBox",
            center: true,
            showClose: false,
          })
          .then(({ value }) => {
            this.$axios.get("/login?phone=" + value).then((res) => {
              let data = res.data;
              if (data.code === 200) {
                this.token = data.message;
                localStorage.setItem("token", data.message);
                localStorage.setItem("time", new Date().getTime());
                resolve(true);
              } else {
                Toast({
                  type: "fail",
                  message: "兑换失败,请勿重复抽奖",
                  className: "fail",
                  onOpened: function () {
                    // location.reload();
                  },
                  duration: 7000,
                });
                resolve(false);
              }
              // console.log(res)
            });
          })
          .catch(() => {
            resolve(false);
          });
      });
    },

    /**
     * 进入动画函数
     */
    cloud() {
      // let width = document.documentElement.clientWidth;
      // let height = document.documentElement.clientHeight;
      let canvas = this.$refs.cloudCanvas;
      let ctx = canvas.getContext("2d");
      let maskX = (canvas.width - (70 + this.count)) / 2,
        maskY = (canvas.height - (40 + this.count)) / 2;
      if (this.markLoaded) {
        canvas.width = this.imgMark.width;
        canvas.height = this.imgMark.height;
        // debugger
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.globalCompositeOperation = "source-over";
        // this.drawImageIOSFix(ctx,img, maskX, maskY, 70 + this.count, 40 + this.count)
        ctx.drawImage(this.img, maskX, maskY, 70 + this.count, 40 + this.count);
        // ctx.drawImage();
        // debugger
        // let imgRect = this.coverImg(width,height,imgMark.width,imgMark.height);
        // console.log(imgRect)
        ctx.globalCompositeOperation = "source-in";
        // this.drawImageIOSFix(ctx,imgMark, 0, 0, imgMark.naturalWidth, imgMark.naturalHeight);
        ctx.drawImage(
          this.imgMark,
          0,
          0,
          this.imgMark.naturalWidth,
          this.imgMark.naturalHeight
        );

        this.opacity = this.opacity + 0.005; // 不能写成 this.opacity += 0.005, 否则 watch 监听失效
        ctx.globalAlpha = this.opacity;
        this.count += 20;
        // console.log(width,height)
        // console.log(this.opacity);
      }
      this.animationId = window.requestAnimationFrame(this.cloud);
    },
    detectVerticalSquash(img) {
      // var iw = img.naturalWidth,
      var ih = img.naturalHeight;
      var canvas = document.createElement("canvas");
      canvas.width = 1;
      canvas.height = ih;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      var data = ctx.getImageData(0, 0, 1, ih).data;
      // search image edge pixel position in case it is squashed vertically.
      var sy = 0;
      var ey = ih;
      var py = ih;
      while (py > sy) {
        var alpha = data[(py - 1) * 4 + 3];
        if (alpha === 0) {
          ey = py;
        } else {
          sy = py;
        }
        py = (ey + sy) >> 1;
      }
      var ratio = py / ih;
      return ratio === 0 ? 1 : ratio;
    },

    /**
     * A replacement for context.drawImage
     * (args are for source and destination).
     */
    drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) {
      var vertSquashRatio = this.detectVerticalSquash(img);
      // Works only if whole image is displayed:
      // ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio);
      // The following works correct also when only a part of the image is displayed:
      ctx.drawImage(
        img,
        sx * vertSquashRatio,
        sy * vertSquashRatio,
        sw * vertSquashRatio,
        sh * vertSquashRatio,
        dx,
        dy,
        dw,
        dh
      );
    },
  },
  async mounted() {
    // this.loading()
    let u = navigator.userAgent;
    await this.judgeLogin();
    // navigator.language = "zh-CN"
    // var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    // 只请求一次图片资源
    this.img = new Image();
    this.imgMark = new Image();
    this.img.src =
      "https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/img/main-center-med-1.png";
    this.imgMark.src =
      "https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/抽奖.jpg";
    this.imgMark.onload = () => {
      this.markLoaded = true;
    };
    // 未抽奖
    console.log(localStorage.getItem("flag"));
    if (! localStorage.getItem("flag")) {
      console.log("初始化canvas");
      // 初始化 canvas 画图大小以使用不同的终端屏幕型号
      await this.paint();
    }
    // 加载进入动画
    this.cloud();
  },
};
</script>

<style scoped>
.bg {
  display: flex;
  position: relative;
  width: 100vw;
  height: 100vh;
  /* background-image: url("../assets/img/抽奖.jpg"); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.clickButton {
  width: 30px;
  height: 60px;
  padding: 20px 20px 20px 20px;
  text-align: center;
  /* background-color: #f2e2c0; */
  background-image: url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/地点框.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 1.6rem;
}

.mountain {
  position: absolute;
  right: 10vw;
  top: 8vh;
}

.village {
  position: absolute;
  right: 27vw;
  top: 23vh;
}

.river {
  position: absolute;
  left: 10vw;
  top: 30vh;
}

.secret {
  position: absolute;
  left: 20vw;
  top: 53vh;
}

#showPrice {
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  /* background-color: #f2e2c0; */
  animation: show 1s ease;
  z-index: 10;
}

#specialShowPrice {
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  /* background-color:#dbcfc2; */
  background-image: url("https://lottery-static-javatribe.oss-accelerate.aliyuncs.com/static/手写板.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #d7c9bc;
  background-position: center;
  /* animation: show 1s ease; */
  z-index: 10;
}

#showPrice > div {
  position: absolute;
  bottom: 15vh;
  text-align: center;
  margin: 0 auto;
  font-size: 2.2rem;
}

@keyframes show {
  0% {
    opacity: 0;
  }

  25% {
    /* scale: 0.25; */
    /* transform: rotate(360deg) scale(0.25); */
    opacity: 0.25;
  }

  50% {
    /* scale: 0.5; */
    /* transform: rotate(720deg) scale(0.5); */
    opacity: 0.5;
  }

  75% {
    /* scale: 0.75; */
    /* transform: rotate(540deg) scale(0.75); */
    opacity: 0.75;
  }

  100% {
    /* scale: 1; */
    /* transform: rotate(720deg) scale(1); */
    opacity: 1;
  }
}

#canvas {
  position: absolute;
  top: 23.3vh;
  background: #fff;
  /* width: 59.3vw;
  height: 58vh; */
}

.specialTitle {
  position: absolute;
  bottom: 8vh;
  font-size: 2.2rem;
}

#cloudCanvas {
  width: 100vw;
  max-width: 100%;
  height: 100%;
  display: block;
  /* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
  cursor: pointer;
}
</style>
<style>
.confirmButton {
  background-color: #fff !important;
  border-color: #dcdfe6 !important;
}

.messageBox {
  width: 100vw !important;
}

.van-icon {
  color: #fff !important;
}

.van-toast__text {
  color: #fff !important;
}
</style>
